<template>
    <div class="page setting-page">
        <div class="setting-title" style="min-width:1000px">
            <span>现场布置及分析</span>
            <div class="term-info">
                <div class="term-title">{{form.name}}</div>
                <div class="term-type">{{form.locationType | filterType(form.stationType)}}</div>
            </div>
        </div>
        <div style="min-width:1000px;overflow: hidden;width:100%">
            <div class="setting-form" style="width:560px;float:left;min-height:500px">
                <div style="font-size:12px;margin-top:20px;">请在Sketch UP的场景中选择布置面，点击下面按钮进行组件布置。</div>
<!--                <div style="font-size:12px;color:#aaa;margin-top:10px"><i class="el-icon-warning" style="color:#e51c23cc;left:0;font-size:16px;"></i> 布置完毕后，如需将布置结果同步至当前工程，请点击右下角“同步数据”按钮。</div>-->
                <div style="margin-top:20px">
                    <el-button style="background: rgb(86, 119, 252);color:#fff;width:120px" @click="toLayout" :loading="layoutBtnLoading">开始布置</el-button>
                </div>
                <!--v-show="fzzl"-->
                <div v-loading="layoutLoading" v-show="!syncBtnDisabled">
                    <div class="form-title">
                        布置分析
                        <span style="font-size:12px;color:#aaa;font-weight: normal;padding-left:10px">
                        <i class="el-icon-warning" style="color:#e51c23cc;left:0;font-size:16px;"></i> 此分析暂不考虑相关损失。
                    </span>
                    </div>
                    <div class="form-div">
                        <div class="block" style="padding-right:40px">
                            <div v-if="form.layoutType == 2" style="font-size:12px;margin-bottom:10px">
                                年有效辐照量大于 {{numVal.minYearlyEffAvgRadiation}} {{form.powerPlantCapacityType == 'kWp' ? 'kWh/㎡.year' : 'MWh/㎡.year'}}的组件，将会被布置，请拖动滑块进行调整后，点击重新布置按钮。
                            </div>
                            <div v-if="form.layoutType == 1" style="font-size:12px;margin-bottom:10px">
                                支架上所有组件的平均辐照总量大于 {{numVal.minYearlyEffAvgRadiation}} {{form.powerPlantCapacityType == 'kWp' ? 'kWh/㎡.year' : 'MWh/㎡.year'}}的支架，将会被布置，请拖动滑块进行调整后，点击重新布置按钮
                            </div>
                            <el-slider v-model="numVal.minYearlyEffAvgRadiation" :min="0"  :max="numVal.yearlyRadiation!='' ? yearlyRadiation  : 0" :format-tooltip="formatTooltip" @change="changeValue" :step="yearlyRadiation > 10 ? 10 : 1"></el-slider>
                            <div class="analysis-ps">
                                <div class="text">0 {{form.powerPlantCapacityType == 'kWp' ? 'kWh/㎡.year' : 'MWh/㎡.year'}}</div>
                                <div class="text">{{numVal.yearlyRadiation | fifterMWP(form.powerPlantCapacityType)}}{{form.powerPlantCapacityType == 'kWp' ? 'kWh/㎡.year' : 'MWh/㎡.year'}}</div>
                            </div>
                        </div>
                        <div style="margin-top:10px;">
                            <el-button style="background: rgb(86, 119, 252);color:#fff;width:120px" @click="toLayout('reset')" v-if="isShowBtn" :loading="layoutBtnLoading1">重新布置</el-button>
                        </div>
                        <div class="layout-num">
                            <div class="num-row" v-if="form.layoutType == 1">
                                <div class="num-col">
                                    <div class="text">标准支架布置数量（每支架{{form.bracketLayout.componentTranNum*(form.bracketLayout.isStack ? form.bracketLayout.stackNum : 1)}}个组件）</div>
                                    <div class="num">
                                        <span class="big">{{numVal.stdBracketNum}}</span>
                                    </div>
                                </div>
<!--                                <div class="num-col">-->
<!--                                    <div class="text">补充支架布置数量（每支架0个组件）</div>-->
<!--                                    <div class="num">-->
<!--                                        <span class="big">{{numVal.supBracketNum}}</span>-->
<!--                                    </div>-->
<!--                                </div>-->
                            </div>
                            <div class="num-row">
                                <div class="num-col">
                                    <div class="text">实际布置组件数量/设计使用数量（个）</div>
                                    <div class="num">
                                        <span class="big">{{numVal.actComponentNum}}</span>
                                        <span class="small">/{{form.componentNum}}</span>
                                    </div>
                                </div>
                                <div class="num-col">
                                    <div class="text">实际电站容量/设计电厂容量（{{form.powerPlantCapacityType}}）</div>
                                    <div class="num">
                                        <span class="big">{{numVal.actComponentNum | fiferCapacity(curComponentInfo.p_stc,form.powerPlantCapacityType)}}</span>
                                        <span class="small">/{{form.powerPlantCapacity}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="num-row">
                                <div class="num-col">
                                    <div class="text">年辐照总量（{{form.powerPlantCapacityType == 'kWp' ? 'kWh/㎡.year' : 'mWh/㎡.year'}}）</div>
                                    <div class="num">
                                        <span class="big">{{numVal.yearlyRadiation | fifterMWP(form.powerPlantCapacityType)}}</span>
                                    </div>
                                </div>
                                <div class="num-col" style="margin-right:10px">
                                    <div class="text">年平均有效辐照量（{{form.powerPlantCapacityType == 'kWp' ? 'kWh/㎡.year' : 'mWh/㎡.year'}}）</div>
                                    <div class="num">
                                        <span class="big">{{numVal.yearlyEffAvgRadiation | fifterMWP(form.powerPlantCapacityType)}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-title">
                        截图（{{imglist.length}}/9）
                    </div>
                    <div class="form-div">
                        <div class="img-list" v-if="imglist.length > 0 ">
                            <div class="img-div" v-for="(item,index) in imglist" :key="index" v-dragging="{ item: item, list: imglist, group: 'img' }">
                                <img :src="item.url" @click="fullImg(item)"/>
                                <div class="del-div" @click="delImg(index)">删除</div>
                            </div>
                        </div>
                        <div>
                            <el-button style="background: rgb(86, 119, 252);color:#fff;width:160px" :disabled="imglist.length > 8" @click="screenshot" :loading="screenshotBtnLoading">截取当前场景图片</el-button>
                        </div>
                    </div>
                </div>

            </div>
            <div class="pamars-div" style="float:right;">
                <div class="title">基本参数</div>
                <div class="pamars-row">
                    <div class="pamars-lable">数据最后同步时间</div>
                    <div class="pamars-text" style="color:red">{{form.dataSyncDate}}</div>
                </div>
                <div class="pamars-row">
                    <div class="pamars-lable">项目名称</div>
                    <div class="pamars-text">{{form.name}}</div>
                </div>
                <div class="pamars-row">
                    <div class="pamars-lable">项目单位</div>
                    <div class="pamars-text">{{form.companyName}}</div>
                </div>
                <div class="pamars-row">
                    <div class="pamars-lable">电站类型</div>
                    <div class="pamars-text">{{form.locationType | filterType(form.stationType)}}</div>
                </div>
                <div class="pamars-row" v-if="form.addressType == 'division'">
                    <div class="pamars-lable">项目地点</div>
                    <div class="pamars-text">{{Country.label}}，{{Province.label}}，{{City.label}}</div>
                </div>
                <div class="pamars-row">
                    <div class="pamars-lable">项目地址</div>
                    <div class="pamars-text">{{form.companyAddress}}</div>
                </div>
                <div class="pamars-row">
                    <div class="pamars-lable">经纬度/海拔</div>
                    <div class="pamars-text">东经{{form.longitude | fifFix(4)}}° /北纬{{form.latitude | fifFix(4)}}°，{{altitude}}m</div>
                </div>
                <div class="pamars-row">
                    <div class="pamars-lable">组件厂商</div>
                    <div class="pamars-text">{{cutCompany.name}}</div>
                </div>
                <div class="pamars-row">
                    <div class="pamars-lable">晶体类型</div>
                    <div class="pamars-text">{{form.moduleType | fiferModuleType}}</div>
                </div>
                <div class="pamars-row">
                    <div class="pamars-lable">组件型号</div>
                    <div class="pamars-text">{{cutComponent.moduleModel}}</div>
                </div>
                <div class="pamars-row">
                    <div class="pamars-lable">电厂设计容量</div>
                    <div class="pamars-text">{{form.powerPlantCapacity}} {{form.powerPlantCapacityType}}</div>
                </div>
                <div class="pamars-row">
                    <div class="pamars-lable">组件设计使用数量</div>
                    <div class="pamars-text">{{form.componentNum}} 个</div>
                </div>
                <div class="pamars-row">
                    <div class="pamars-lable">系统直流端耐压</div>
                    <div class="pamars-text">{{form.dcWithstandVoltage}} V</div>
                </div>
            </div>
        </div>
        <div class="setting-page-bottom">
            <div class="img"><img src="../static/img/logo.png"/> </div>
            <div class="right-link-div">
                <div class="link-btn">选择光伏组件</div>
                <div class="link-btn">支架组件排布</div>
                <div class="link-btn active">现场布置及分析</div>
                <div class="prev-btn"><el-button  icon="el-icon-back" @click="toPrev"></el-button></div>
                <div class="next-btn"><el-button type="primary" @click="synchronization" :loading="syncBtnLoading" disabled>同步数据</el-button></div>
            </div>
        </div>

        <!--放大图片-->
        <el-dialog
                :visible.sync="dialogVisible"
                width="600">
            <img :src="cutImg.url" style="width:100%"/>
        </el-dialog>
    </div>
</template>

<script>
    const defaultNumVal = {
        actComponentNum :'',
        actPowerPlantCapacity :'',
        stdBracketNum :'',
        supBracketNum :'',
        yearlyEffAvgRadiation:'',
        yearlyRadiation :0,
        minYearlyEffAvgRadiation :0,
    }
    import {
        getCompanyList,
        getComponentList,
        getComponentInfo,
        getProjectDetail,
        getCountry,
        getProvince,
        getCity,getMeteorData,postProjectDetailBasic,postProjectScreenshots,getProjectDetailBasic,getProjectScreenshots,getShadowGuding} from '@/api/index.js';
    export default {
        name: 'settingPhotovoltaic',
        data() {
            return {
                form:{},
                id:this.$route.query.id,//项目ID
                btnLoading:false,
                btnLoading2:false,
                curComponentInfo:{},//当前组件详情
                cutComponent:{},//当前组件
                componentList:[],//组件列表
                companyList:[],//厂商列表
                cutCompany:{},//当前厂家
                altitude:'',//海拔
                Country:{},//国家
                Province:{},//省份
                City:{},//城市
                Hmth:'',
                maxQiWen:'',
                value:0,
                imglist:[],
                isShowBtn:false,
                layoutLoading:false,
                layoutBtnLoading:false,
                layoutBtnLoading1: false,
                syncBtnDisabled:true,
                syncBtnLoading:false,
                screenshotBtnLoading:false,
                reciprocalTime:null,
                fzzl:null,
                cutImg:'',
                dialogVisible:false,
                numVal:JSON.parse(JSON.stringify(defaultNumVal)),
                fzArray:[],
                syncMessage:null,
                bracketNum:'--',
                bcBracketNum:'--',
                SHADOW:[],
            }
        },
        watch:{
            '$route'(to,from){
                if(from.name=='settingBracket'){
                    this.init()
                }
            }
        },
        computed:{
            yearlyRadiation(){
                if(this.form.powerPlantCapacityType == 'kWp'){
                    return parseFloat((parseFloat(this.numVal.yearlyRadiation)/1000).toFixed(2))
                }else if(this.form.powerPlantCapacityType == 'MWp'){
                    return parseFloat((parseFloat(this.numVal.yearlyRadiation)/1000000).toFixed(2))
                }
            },

        },
        filters: {
            fifFix(val,num){
                if(val && val != ''){
                    return val.toFixed(num)
                }else{
                    return '--'
                }

            },
            fifterMWP(val,until){
                if(until == 'kWp'){
                    return (parseFloat(val)/1000).toFixed(2)
                }else if(until == 'MWp'){
                    return (parseFloat(val)/1000000).toFixed(2)
                }
            },
            filterType(locationType, stationType) {
                if (locationType == 'ground' && stationType == 'online') {
                    return '并网地面电站'
                } else if (locationType == 'ground' && stationType == 'offline') {
                    return '离网网地面电站'
                } else if (locationType == 'roof' && stationType == 'online') {
                    return '并网网屋顶电站'
                } else if (locationType == 'roof' && stationType == 'offline') {
                    return '离网网屋顶电站'
                }
            },
            fiferModuleType(val){
                if (val == 'MONO_C_SI') {
                    return '单晶'
                } else if (val == 'MULTI_C_SI') {
                    return '多晶'
                } else if (val == 'THIN_FILM') {
                    return '薄膜'
                } else if (val == 'CDTE') {
                    return '碲化镉'
                }else if (val == 'CIGS') {
                    return '铜铟镓硒'
                }else  {
                    return '--'
                }
            },
            fiferCapacity(val,power,until){
                let newval=null;
                if(val && until == 'kWp'){
                    newval =  (parseFloat(val)/1000).toFixed(2)
                }else if(val && until == 'MWp'){
                    newval =  (parseFloat(val)/1000000).toFixed(2)
                }
                if(newval && power){
                    return (newval*power).toFixed(2)
                }else{
                    return  '--'
                }

            }
        },
        methods: {
            //放大图片
            fullImg(item){
                this.dialogVisible = true;
                this.cutImg = item;
            },
            /**
             * 轮询状态
             * @return null
             */
            polling () {
                this.reciprocalTime = ()=>{
                    console.log("轮询中")
                    //@ts-ignore : js setTimeout
                    setTimeout(()=>{
                        if(this.layoutLoading){ //布置
                           if(this.form.layoutType==2){ //组件布置
                               this.componentLayoutCallBack();
                           }else{ //支架布置
                               this.bracketLayoutCallBack();
                           }
                            this.reciprocalTime();
                        }else if(this.screenshotBtnLoading) { //截屏
                            this.screenCallBack();
                            this.reciprocalTime();
                        }else if(this.syncBtnLoading) { // 同步数据
                            console.log("同步中")
                            this.syncCallBack();
                            this.reciprocalTime();
                        }else{
                            clearTimeout(this.reciprocalTime);
                        }
                    },1000);
                };
                this.reciprocalTime();
            },

            //组件布置回调
            componentLayoutCallBack(){
                let layoutComPonentStats = window.localStorage.getItem('layoutComPonentStats');
                window.localStorage.removeItem("layoutComPonentStats");
                if(layoutComPonentStats){
                    this.layoutLoading = false;
                    this.layoutBtnLoading = false;
                    this.layoutBtnLoading1 =  false;
                    if(layoutComPonentStats == 200){ //布置成功
                        let arry = window.localStorage.getItem('arry');
                        this.SHADOW = JSON.parse(arry);
                        console.log("componentNum",window.localStorage.getItem('componentNum'));
                        this.numVal.actComponentNum = window.localStorage.getItem('componentNum');
                        this.syncBtnDisabled = false;
                        window.localStorage.removeItem("arry");
                        window.localStorage.removeItem("componentNum");
                        this.$message({
                            message: '布置成功',
                            type: 'success'
                        });
                        let pamas = this.setData();
                        pamas.NoZJ = parseFloat(this.numVal.actComponentNum);
                        pamas.DZ = this.form.componentLayout.isStack ? parseFloat(this.form.componentLayout.stackNum) : 1;
                        pamas.SHADOW =  JSON.parse(arry);
                        console.log(pamas.SHADOW)
                        if(this.form.bracketType == 1){
                            pamas.slope = parseFloat(this.form.bracket.dipAngleFixed);
                            pamas.saa = parseFloat(this.form.bracket.azimuthFixed);
                        }
                        if(this.form.bracketType == 2 || this.form.bracketType == 3){
                            pamas.slope = parseFloat(this.form.bracket.dipAngleJijie);
                            pamas.saa = parseFloat(this.form.bracket.azimuthJijie);
                        }
                        if(this.form.bracketType==6){
                            pamas.slope = parseFloat(this.form.bracket.shaftAngle);
                        }
                        getShadowGuding(pamas).then((blackData)=>{
                            this.numVal.yearlyRadiation = (blackData.FSxmxnz_inc).toFixed(2);
                            this.numVal.yearlyEffAvgRadiation = (blackData.rad_hour_nz).toFixed(2);

                            this.fzArray = blackData.rad_single;
                            this.synchronization();
                        })
                    }else{ //布置失败
                        this.$message({
                            message: layoutComPonentStats + '布置失败',
                            type: 'error'
                        });
                    }
                }
            },

            //支架布置回调
            bracketLayoutCallBack(){
                let layoutBracketStats = window.localStorage.getItem('layoutBracketStats');
                window.localStorage.removeItem("layoutBracketStats");
                if(layoutBracketStats){
                    this.layoutLoading = false;
                    this.layoutBtnLoading = false;
                    this.layoutBtnLoading1 =  false;
                    if(layoutBracketStats == 200){ //布置成功
                        let arry = window.localStorage.getItem('arry');
                        console.log("arry",arry);
                        this.SHADOW = JSON.parse(arry);
                        console.log("componentNum",window.localStorage.getItem('componentNum'));
                        this.numVal.actComponentNum = window.localStorage.getItem('componentNum');
                        this.numVal.stdBracketNum = window.localStorage.getItem('bracketNum');
                        this.numVal.supBracketNum = window.localStorage.getItem('bcBracketNum');
                        this.syncBtnDisabled = false;
                        window.localStorage.removeItem("arry");
                        window.localStorage.removeItem("componentNum");
                        window.localStorage.removeItem("bracketNum");
                        window.localStorage.removeItem("bcBracketNum");
                        this.$message({
                            message: '布置成功',
                            type: 'success'
                        });
                        let pamas = this.setData();
                        pamas.NoZJ = parseFloat(this.numVal.actComponentNum);
                        let stackNum = this.form.bracketLayout.isStack ? parseFloat(this.form.bracketLayout.stackNum) : 1
                        pamas.DZ = stackNum * this.form.bracketLayout.componentTranNum;
                        pamas.SHADOW =  JSON.parse(arry);
                        console.log(pamas.SHADOW)
                        if(this.form.bracketType == 1){
                            pamas.slope = parseFloat(this.form.bracket.dipAngleFixed);
                            pamas.saa = parseFloat(this.form.bracket.azimuthFixed);
                        }
                        if(this.form.bracketType == 2 || this.form.bracketType == 3){
                            pamas.slope = parseFloat(this.form.bracket.dipAngleJijie);
                            pamas.saa = parseFloat(this.form.bracket.azimuthJijie);
                        }
                        if(this.form.bracketType==6){
                            pamas.slope = parseFloat(this.form.bracket.shaftAngle);
                        }
                        getShadowGuding(pamas).then((blackData)=>{
                            this.numVal.yearlyRadiation = (blackData.FSxmxnz_inc).toFixed(2);
                            this.numVal.yearlyEffAvgRadiation = (blackData.rad_hour_nz).toFixed(2);
                            this.fzArray = blackData.rad_single;
                            this.synchronization();
                        })
                    }else{ //布置失败
                        this.$message({
                            message: layoutBracketStats + '布置失败',
                            type: 'error'
                        });
                    }
                }
            },

            //设置获取角度参数
            setData(){
                let data = {};
                this.Hmth.forEach((el,index)=>{
                    let key = 'Hmth' + (index + 1);
                    data[key] = parseFloat((el*24/1000).toFixed(2));
                })
                for(let i=1; i<13; i++){
                    let key1 =  'roug' + i;
                    if(this.form.reflectivityType == 'fixed'){
                        data[key1] = this.form.reflectivity[0]['value']
                    }else{
                        data[key1] = this.form.reflectivity[i-1]['value']
                    }
                }
                data.lat = parseFloat(this.form.latitude);
                // data.bo = parseFloat(this.form.bo) ? parseFloat(this.form.bo) : 0.5;
                return data
            },


            //截图回调
            screenCallBack(){
                let screenshotStats = window.localStorage.getItem('screenshotStats');
                if (screenshotStats) {
                    window.localStorage.removeItem("screenshotStats");
                    if(screenshotStats == 200){ //截屏成功
                        this.screenshotBtnLoading = false;
                        let screenshotUrl = window.localStorage.getItem("screenshotUrl");
                        let screenshotObject = window.localStorage.getItem("screenshotObject");
                        this.imglist.push({url:screenshotUrl,object:screenshotObject});
                        window.localStorage.removeItem("screenshotUrl");
                        window.localStorage.removeItem("screenshotObject");
                        let imgDa = {};
                        imgDa.projectId = this.$route.query.id;
                        imgDa.screenshots = [];
                        this.imglist.forEach((el)=>{
                            imgDa.screenshots.push(el.object)
                        });
                        postProjectScreenshots(imgDa).then(()=>{
                            this.$message({
                                message: '截图成功',
                                type: 'success'
                            });
                        })

                    }else{ //截屏失败
                        this.$message({
                            message: screenshotStats + ':' + '截图失败',
                            type: 'error'
                        });
                    }
                }
            },

            //同步回调
            syncCallBack(){
                let synchronizationStats = window.localStorage.getItem('synchronizationStats');
                if(synchronizationStats){
                    window.localStorage.removeItem("synchronizationStats");
                    if(synchronizationStats == 200){ //同步成功
                        this.saveProject().then(()=>{
                            this.syncBtnLoading = false;
                            this.syncMessage.close();
                            this.$message({
                                type: 'success',
                                message: '数据同步成功!'
                            });
                            this.init();
                        }).catch(()=>{
                            this.syncBtnLoading = false;
                            this.syncMessage.close();
                        })
                    }else{ //同步失败
                        this.syncBtnLoading = false;
                        let msg = window.localStorage.getItem("synchronizationMsg");
                        window.localStorage.removeItem("synchronizationMsg");
                        this.syncMessage.close();
                        this.$message({
                            message: synchronizationStats + ':' + msg,
                            type: 'error'
                        });
                    }
                }
            },

            //改变年幅照量
            changeValue(){
                this.isShowBtn = true;
            },

            //截图
            screenshot(){
                this.screenshotBtnLoading = true;
                let pa=JSON.stringify(this.form);
                if(!this.layoutLoading && !this.syncBtnLoading){
                    this.polling()
                }
                console.log("id",this.$route.query.id)
                sketchup.screenshot_action(this.$route.query.id);
            },
            //同步数据
            synchronization(){
                let pa=JSON.stringify(this.form);
                this.syncBtnLoading = true;
                this.syncMessage = this.$message({
                    type: 'info',
                    message: '同步数据中……',
                    duration:0
                });
                if(!this.layoutLoading && !this.screenshotBtnLoading){
                    this.polling()
                }
                sketchup.synchronization_action(this.$route.query.id);
            },
            //删除图片
            delImg(index){
                this.$confirm('确认删除该图片吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.imglist.splice(index,1);
                    let imgDa = {};
                    imgDa.projectId = this.$route.query.id;
                    imgDa.screenshots = [];
                    this.imglist.forEach((el)=>{
                        imgDa.screenshots.push(el.object)
                    });
                    postProjectScreenshots(imgDa).then(()=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //布置
            toLayout(type){
               this.layoutLoading = true;
                this.imglist = [];
                this.$message({
                    message: '即将进行重新布置，如果已存在截图，截图将被清空！',
                    type: 'warning'
                });
               let pa=JSON.stringify(this.form);
                if(type == 'reset'){
                   this.layoutBtnLoading1 = true;
                   // pa = Object.assign({fz:this.numVal.yearlyRadiation},pa)
               }else{
                  this.layoutBtnLoading = true;
               }
                if(!this.syncBtnLoading && !this.screenshotBtnLoading){
                    this.polling()
                }
                let width = this.curComponentInfo.w_c;
                let length = this.curComponentInfo.l_c;
                let thick = '';
                let power = this.curComponentInfo.p_stc;
                let dip = 0;
                let azimuth = 0;
                if(this.form.bracketType == 1){
                    dip = this.form.bracket.dipAngleFixed;
                    azimuth = this.form.bracket.azimuthFixed;
                }else if(this.form.bracketType == 2 || this.form.bracketType == 3){
                    dip = this.form.bracket.dipAngleJijie;
                    azimuth = this.form.bracket.azimuthJijie;
                }else if(this.form.bracketType == 6){
                    dip = this.form.bracket.shaftAngle
                }
                let fzarray=[];
                this.fzArray.forEach((el,index)=>{
                    if(this.form.powerPlantCapacityType == 'kWp'){
                        fzarray.push(parseFloat(el)/1000);
                    }else if(this.form.powerPlantCapacityType == 'MWp'){
                        fzarray.push(parseFloat(el)/1000000);
                    }
                });
                let componentNum = this.form.componentNum;
                if(this.form.layoutType==2){ //组件
                    let layoutType = this.form.componentLayout.componentLayoutType;
                    let componentMargin = this.form.componentLayout.componentMargin;
                    let componentSpacing = this.form.componentLayout.componentSpacing ;
                    let stackNum = this.form.componentLayout.isStack ? this.form.componentLayout.stackNum: 1;
                    let stackMargin = this.form.componentLayout.isStack ? this.form.componentLayout.stackMargin: 0;
                    let overhaulTranNum = this.form.componentLayout.isOverhaul ? this.form.componentLayout.overhaulTranNum : 0;
                    let overhaulPortraitNum = this.form.componentLayout.isOverhaul ? this.form.componentLayout.overhaulPortraitNum : 0;
                    let overhaulTranWidth = this.form.componentLayout.isOverhaul ? this.form.componentLayout.overhaulTranWidth : 0;
                    let overhaulLongitudinalWidth = this.form.componentLayout.isOverhaul ? this.form.componentLayout.overhaulLongitudinalWidth : 0;
                    let outMargin = this.form.componentLayout.outMargin;
                    let bottomSpacing = this.form.componentLayout.bottomSpacing;
                    let isAlgin = this.form.componentLayout.isAlgin;
                    console.log(width,length,thick,power,dip,layoutType,componentMargin,componentSpacing,stackNum,stackMargin,overhaulPortraitNum,overhaulTranNum,overhaulTranWidth,overhaulLongitudinalWidth,outMargin,bottomSpacing,componentNum,isAlgin,this.numVal.minYearlyEffAvgRadiation,fzarray);
                    sketchup.layout_component_action(width,length,thick,power,dip,azimuth,layoutType,componentMargin,componentSpacing,stackNum,stackMargin,overhaulPortraitNum,overhaulTranNum,overhaulTranWidth,overhaulLongitudinalWidth,outMargin,bottomSpacing,componentNum,isAlgin,this.numVal.minYearlyEffAvgRadiation,fzarray);
                }else{ //支架
                    let bracketLayoutType = this.form.bracketLayout.bracketLayoutType;
                    let bracketUpMargin = this.form.bracketLayout.bracketUpMargin;
                    let bracketDownMargin = this.form.bracketLayout.bracketDownMargin;
                    let bracketLeftMargin = this.form.bracketLayout.bracketLeftMargin;
                    let bracketRightMargin = this.form.bracketLayout.bracketRightMargin;
                    let componentTranNum = this.form.bracketLayout.componentTranNum;
                    let componentMargin = this.form.bracketLayout.componentMargin;
                    let stackNum = this.form.bracketLayout.isStack ? this.form.bracketLayout.stackNum: 1;
                    let stackMargin = this.form.bracketLayout.isStack ? this.form.bracketLayout.stackMargin: 0;
                    let supplementTranNum = this.form.bracketLayout.isSupplement ? this.form.bracketLayout.isSupplement: 0;
                    let bracketSpacing = this.form.bracketLayout.bracketSpacing;
                    let bracketLeftRightSpacing = this.form.bracketLayout.bracketLeftRightSpacing;
                    let overhaulTranNum = this.form.bracketLayout.isOverhaul ? this.form.bracketLayout.overhaulTranNum : 0;
                    let overhaulPortraitNum = this.form.bracketLayout.isOverhaul ? this.form.bracketLayout.overhaulPortraitNum : 0;
                    let overhaulTranWidth = this.form.bracketLayout.isOverhaul ? this.form.bracketLayout.overhaulTranWidth : 0;
                    let overhaulLongitudinalWidth = this.form.bracketLayout.isOverhaul ? this.form.bracketLayout.overhaulLongitudinalWidth : 0;
                    let outMargin = this.form.bracketLayout.outMargin;
                    let isAlgin = this.form.bracketLayout.isAlgin;
                    let bottomSpacing = this.form.bracketLayout.bottomSpacing;
                    console.log(width, length,thick,power,dip,bracketLayoutType,bracketUpMargin,bracketDownMargin,bracketLeftMargin,bracketRightMargin,componentTranNum,componentMargin,stackNum,stackMargin,supplementTranNum,bracketSpacing,bracketLeftRightSpacing,overhaulTranNum,overhaulPortraitNum,overhaulTranWidth,overhaulLongitudinalWidth,outMargin,isAlgin,bottomSpacing,componentNum,this.numVal.minYearlyEffAvgRadiation,fzarray)
                    sketchup.layout_bracket_action(width, length,thick,power,dip,azimuth,bracketLayoutType,bracketUpMargin,bracketDownMargin,bracketLeftMargin,bracketRightMargin,componentTranNum,componentMargin,stackNum,stackMargin,supplementTranNum,bracketSpacing,bracketLeftRightSpacing,overhaulTranNum,overhaulPortraitNum,overhaulTranWidth,overhaulLongitudinalWidth,outMargin,isAlgin,bottomSpacing,componentNum,this.numVal.minYearlyEffAvgRadiation,fzarray);
                }
            },

            //格式化显示
            formatTooltip(val) {
                let unti = this.form.powerPlantCapacityType == 'kWp' ? ' kWh/㎡.year' : ' MWh/㎡.year'
                return val+unti
            },
            //上一步
            toPrev(){
                this.$router.go(-1)
            },

            //保存同步数据
            saveProject(){
                let pa = {};
                pa.projectId = this.$route.query.id;
                pa.actComponentNum = this.numVal.actComponentNum;
                pa.actPowerPlantCapacity = (this.numVal.actComponentNum * this.curComponentInfo.p_stc).toFixed(2);
                pa.stdBracketNum = this.numVal.stdBracketNum;
                pa.supBracketNum = this.numVal.supBracketNum;
                pa.yearlyEffAvgRadiation = this.numVal.yearlyEffAvgRadiation;
                pa.yearlyRadiation = this.numVal.yearlyRadiation;
                if(this.form.powerPlantCapacityType == 'kWp'){
                    pa.minYearlyEffAvgRadiation = this.numVal.minYearlyEffAvgRadiation * 1000;
                }else if(this.form.powerPlantCapacityType == 'MWp'){
                    pa.minYearlyEffAvgRadiation = this.numVal.minYearlyEffAvgRadiation * 1000000;
                }
                pa.radiationArr = this.fzArray;
                pa.shadow = this.SHADOW;
                let imgDa = {};
                imgDa.projectId = this.$route.query.id;
                imgDa.screenshots = [];
                this.imglist.forEach((el)=>{
                    imgDa.screenshots.push(el.object)
                })
                return postProjectDetailBasic(pa).then((res)=>{
                        return postProjectScreenshots(imgDa)
                })
            },

            //获取组件详情
            getComponentInfoData(){
                return getComponentInfo({componentId:this.form.componentId}).then((res)=>{
                    this.curComponentInfo = res;
                })
            },

            //获取组件列表
            getComponentListData(){
                return getComponentList({companyId:this.form.companyId,moduleType:this.form.moduleType}).then((res)=>{
                    this.componentList = res
                })
            },

            //找出组件名
            findComponentName(){
                this.cutComponent = this.componentList.find((el)=>{
                    return  el.id == this.form.componentId
                });

            },

            //获取组件厂商列表
            getCompanyListData(){
                return  getCompanyList({companyType:'COMPONENT'}).then((res)=>{
                    this.companyList = res
                });
            },

            //找出厂家名
            findCompanyName(){
                this.cutCompany = this.companyList.find((el)=>{
                    return  el.id == this.form.companyId
                });
            },
            //获取气象数据
            getMeteorFN(){
                let data={};
                data.source = this.form.meteorSource;
                data.latitude = this.form.latitude;
                data.longitude = this.form.longitude;
                return getMeteorData(data).then((res)=>{
                    this.altitude = res.alt;
                    this.Hmth = res.gh;
                    this.maxQiWen = res.ta.sort(function(a,b){
                        return b-a;
                    })[0] + 10;
                })
            },

            //获取截图信息
            getImgList(){
                getProjectScreenshots({projectId:this.$route.query.id}).then((res)=>{
                    this.imglist = res;
                })
            },
            //获取工程幅照信息
            getValData(){
                getProjectDetailBasic({projectId:this.$route.query.id}).then((res)=>{
                    this.numVal = JSON.parse(JSON.stringify(defaultNumVal));
                    this.numVal.actComponentNum = res && res.actComponentNum ? res.actComponentNum : 0;
                    // this.numVal.actPowerPlantCapacity = res.actPowerPlantCapacity;
                    this.numVal.stdBracketNum = res && res.stdBracketNum ? res.stdBracketNum : 0;
                    this.numVal.supBracketNum = res && res.supBracketNum ? res.supBracketNum : 0;
                    this.numVal.yearlyEffAvgRadiation = res && res.yearlyEffAvgRadiation ? res.yearlyEffAvgRadiation : '';
                    this.numVal.yearlyRadiation = res && res.yearlyRadiation ? res.yearlyRadiation : '';
                    this.numVal.minYearlyEffAvgRadiation = res && res.minYearlyEffAvgRadiation ? res.minYearlyEffAvgRadiation : 0;
                    if(this.form.powerPlantCapacityType == 'kWp'){
                        this.numVal.minYearlyEffAvgRadiation = parseFloat((parseFloat(this.numVal.minYearlyEffAvgRadiation)/1000).toFixed(2));
                    }else if(this.form.powerPlantCapacityType == 'MWp'){
                        this.numVal.minYearlyEffAvgRadiation = parseFloat((parseFloat(this.numVal.minYearlyEffAvgRadiation)/1000000).toFixed(2))
                    }
                    this.fzArray = res && res.radiationArr ? res.radiationArr : [];
                })
            },

            //获取工程信息
            getProjectDetailData(){
                getProjectDetail({projectId:this.$route.query.id}).then((res)=>{
                    this.form = Object.assign({}, res);

                    this.getCompanyListData().then(()=>{
                        this.findCompanyName();
                    });

                    this.getComponentListData().then(()=>{
                        this.findComponentName();
                    });


                    if(this.form.addressType == 'division'){
                        getCountry({continentId:this.form.continentId}).then((res)=>{
                            this.Country = res.find((el)=>{
                                return el.id = this.form.countryId
                            })
                        });
                        getProvince({countryId:this.form.countryId}).then((res)=>{
                            this.Province = res.find((el)=>{
                                return el.id = this.form.provinceId
                            })
                        });
                        getCity({provinceId:this.form.provinceId}).then((res)=>{
                            this.City = res.find((el)=>{
                                return el.id = this.form.cityId
                            })
                        });
                    }

                    if(this.form.is3dDesigned && !this.form.is3dReset){
                        this.syncBtnDisabled = false;
                    }else{
                        this.syncBtnDisabled = true;
                    }
                    this.getComponentInfoData();
                    this.getMeteorFN();
                })
            },
            //初始化页面数据
            init(){
                this.getProjectDetailData();
                this.getImgList();
                this.getValData();
            }

        },
        created() {
            this.init();
        },
        beforeRouteLeave (to, from, next) {
            this.layoutLoading = false;
            this.layoutBtnLoading = false;
            this.layoutBtnLoading1 = false;
            this.syncBtnLoading = false;
            this.screenshotBtnLoading = false;
            next()
        }
    }
</script>

<style>
    #allmap {
        height: 300px;
        width: 100%;
        overflow: hidden;
    }

    #r-result {
        width: 100%;
        font-size: 14px;
        margin-bottom:20px
    }
</style>



